// 定义组件
const ExhibitionComponent = {
    template: `
      <div class="con container">
        <div class="protext container">
          
        </div>
        <div class="procon text-center">
          <div class="col-md-4 col-sm-4 col-md-6">
            <a href="https://shop268963609.taobao.com/?spm=pc_detail.29232929.shop_block.dshopinfo.488d7dd6Rkpb56">
              <dl>
                <dt></dt>
                <transition name="slide-down">
                  <img v-if="imageVisibilities[0]" src="images/wenc-1.jpg" class="img-responsive"/>
                </transition>
                <dd>
                  <h4><span>纸雕冰箱贴</span></h4>
                  <p>磁贴个性创意莫高窟文创冰箱贴新年礼物</p>
                  <p>现在购买有折扣</p>
                </dd>
              </dl>
            </a>
          </div>
          <div class="col-md-4 col-sm-4 col-md-6">
            <a href="https://shop268963609.taobao.com/?spm=pc_detail.29232929.shop_block.dshopinfo.488d7dd6Rkpb56">
              <dl>
                <dt></dt>
                <transition name="slide-down">
                  <img v-if="imageVisibilities[1]" src="images/wenc-2.jpg" class="img-responsive"/>
                </transition>
                <dd>
                  <h4><span>九色鹿反弹琵琶烫金版画摆件</span></h4>
                  <p>博物馆文创礼品生日礼物</p>
                  <p>现在购买有折扣</p>
                </dd>
              </dl>
            </a>
          </div>
          <div class="col-md-4 col-sm-4 col-md-6">
            <a href="https://shop268963609.taobao.com/?spm=pc_detail.29232929.shop_block.dshopinfo.488d7dd6Rkpb56">
              <dl>
                <dt></dt>
                <transition name="slide-down">
                  <img v-if="imageVisibilities[2]" src="images/wenc-3.jpg" class="img-responsive"/>
                </transition>
                <dd>
                  <h4><span>敦煌藏经洞遗珍典藏摆件灯</span></h4>
                  <p>敦煌藏经洞残片遗珍复刻中式摆件乔迁之喜礼物实用礼物送礼</p>
                  <p>现在购买有折扣</p>
                </dd>
              </dl>
            </a>
          </div>
        </div>
        <div class="procon text-center">
          <div class="col-md-4 col-sm-4 col-md-6">
            <a href="https://shop268963609.taobao.com/?spm=pc_detail.29232929.shop_block.dshopinfo.488d7dd6Rkpb56">
              <dl>
                <dt></dt>
                <transition name="slide-down">
                  <img v-if="imageVisibilities[3]" src="images/wenc-4.jpg" class="img-responsive"/>
                </transition>
                <dd>
                  <h4><span>敦煌九色鹿金属镂空书签</span></h4>
                  <p>古典书签高档精致古风书签创意书签文创书签精美书签</p>
                  <p>现在购买有折扣</p>
                </dd>
              </dl>
            </a>
          </div>
          <div class="col-md-4 col-sm-4 col-md-6">
            <a href="https://shop268963609.taobao.com/?spm=pc_detail.29232929.shop_block.dshopinfo.488d7dd6Rkpb56">
              <dl>
                <dt></dt>
                <transition name="slide-down">
                  <img v-if="imageVisibilities[4]" src="images/wenc-5.jpg" class="img-responsive"/>
                </transition>
                <dd>
                  <h4><span>敦煌纹彩双人餐具套装</span></h4>
                  <p>结婚礼物实用伴手礼盒订婚礼物</p>
                  <p>现在购买有折扣</p>
                </dd>
              </dl>
            </a>
          </div>
          <div class="col-md-4 col-sm-4 col-md-6">
            <a href="https://shop268963609.taobao.com/?spm=pc_detail.29232929.shop_block.dshopinfo.488d7dd6Rkpb56">
              <dl>
                <dt></dt>
                <transition name="slide-down">
                  <img v-if="imageVisibilities[5]" src="images/wenc-6.jpg" class="img-responsive"/>
                </transition>
                <dd>
                  <h4><span>灿烂敦煌</span></h4>
                  <p>博物馆文创礼品敦煌书籍生日礼物纪念品</p>
                  <p>现在购买有折扣</p>
                </dd>
              </dl>
            </a>
          </div>
        </div>
        <!--页码-->
        <div class="pagess text-center">
          <ul>
            <li class="previous_s"><a href="#">上一页</a></li>
            <li class="pages_solid"><a href="#">1</a></li>
            <li class="pages_hollow"><a href="#">2</a></li>
            <li class="pages_hollow"><a href="#">3</a></li>
            <li class="pages_hollow"><a href="#">4</a></li>
            <li class="next"><a href="#">下一页</a></li>
          </ul>
        </div>
      </div>
    `,
    data() {
      return {
        scrollPosition: 0,
        imageVisibilities: [false, false, false, false, false, false] // 初始时所有图片都不可见
      };
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll);
      this.handleScroll(); // 初始时检查图片是否在视口内
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
/**
 * 处理滚动事件的函数
 * 该函数主要用于监听页面滚动事件，并根据滚动位置更新图片的可见性状态
 */
handleScroll() {
  // 更新当前滚动位置
  this.scrollPosition = window.scrollY;
  
  // 获取页面中所有需要处理的图片元素
  const images = document.querySelectorAll('.procon img');
  
  // 遍历每一张图片，以确定它们是否应该显示
  images.forEach((img, index) => {
    // 获取图片相对于视口的位置
    const imagePosition = img.getBoundingClientRect().top;
    
    // 判断图片是否进入视口（即用户正在查看的部分）
    if (imagePosition < window.innerHeight && imagePosition > 0) {
      // 当图片进入视口时，设置其在组件的imageVisibilities数组中的可见性状态为true
      this.$set(this.imageVisibilities, index, true);
    }
  });
}
    }
  };

  // 定义路由
  const routes = [
    { path: '/', component: ExhibitionComponent }
  ];

  const router = new VueRouter({
    routes // short for `routes: routes`
  });

  // 创建Vue实例
  new Vue({
    router
  }).$mount('#app-2');